<template>
  <div class="box">
    <div class="head">
      <van-icon @click="router.back()" name="arrow-left" />
      <span>关于</span>
      <van-icon name="ellipsis" style="transform: rotate(90deg)" />
    </div>
    <div class="main">
      <img :src="item.img" alt="" />
      <h5 style="margin: 1rem 0">{{ item.name }}</h5>
      <p style="margin: 1rem 0" class="van-multi-ellipsis--l2">
        {{ item.description }}
      </p>
      <div class="botm">
        <div v-for="(i, idx) in setservice" :key="idx" style="display: flex;justify-content: center;align-items: center;width: 45vw;">
          <van-icon name="checked" style="color: #40c4aa;" />&nbsp;
          <p style="width:60%;height: 1rem;">{{ i }}</p>
        </div>
      </div>
      <van-button
        type="primary"
        style="
          width: 90%;
          height: 4rem;
          font-size: 1.2rem;
          position: fixed;
          left: 50%;
          bottom: 10px;
          transform: translateX(-50%);
          background-color: #ffb900;
          border: none;
        "
        @click="topay"
        >现在预订</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
axios.defaults.baseURL = "http://127.0.0.1:3000/shopfront";
const route = useRoute();
const router = useRouter();
const item = ref(JSON.parse(route.query.item) || {});
const servicelist = ref([]);

const getservice = async () => {
  const {data: { data }} = await axios.get("/geiservice");
  servicelist.value = data;
};

const topay=()=>{
    let obj={
        name:item.value.name,
        price:item.value.price,
        services:setservice.value,
        salonId:item.value.salonId
    }
    router.push({
        path:"/shopfrontYuyue",
        query:{
            item:JSON.stringify(obj)
        }
    })
}

const setservice = computed(() => {
  let arr = [];
  servicelist.value.forEach((i) => {
    if (item.value.services && item.value.services.includes(i._id)) {
      arr.push(i.name);
    }
  });
  return arr;
});

onMounted(() => {
  getservice();
});
</script>
<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 1rem;
}

.head {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
}

.main {
  width: 100%;
  height: calc(100% - 10%);
}

.main img {
  width: 100%;
  height: 35%;
  border-radius: 1rem;
}

.botm {
  width: 100%;
  height: 30%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 1rem 0;
}

.botm div {
  width: 46%;
  font-size: 1.2rem;
}
</style>